<template>
  <ele-modal
    form
    :width="840"
    :model-value="modelValue"
    title="会员详情"
    @update:modelValue="updateModelValue"
  >
    <el-descriptions
      class="margin-top"
      :title="detail.realname"
      :column="2"
      size="default"
      border
    >
      <template #extra>
        <el-button
          type="warning"
          size="small"
          @click="openAgency"
          :icon="Discount"
        >
          零工平台
        </el-button>
        <el-button
          type="info"
          size="small"
          @click="openTags"
          :icon="CollectionTag"
        >
          标签
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="openEdit"
          :icon="EditPen"
        >
          编辑
        </el-button>
      </template>

      <el-descriptions-item label-align="right" width="60">
        <template #label>
          <i class="el-icon-collection-tag"></i>
          编号
        </template>
        {{ detail.id }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right" width="60">
        <template #label>
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ detail.username }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right" width="60">
        <template #label>
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ detail.tel }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 性别 </template>
        {{ detail.genderText }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 身份证号码 </template>
        {{ detail.identifier }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 年龄 </template>
        {{ detail.age }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 身高 </template>
        {{ detail.height }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 学校 </template>
        {{ detail.school }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 备注/黑名单 </template>
        <span class="blue pointer" @click="openNotes()">
          {{ detail.note }}
          <el-icon :size="12" class="pointer" @click="openNotes()">
            <ZoomIn />
          </el-icon>
        </span>
        /
        <span class="blue pointer" @click="openBlackList()">
          {{ detail.blacklist }}
          <el-icon :size="12" class="pointer" @click="openBlackList()">
            <ZoomIn />
          </el-icon>
        </span>
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label>
          <i class="el-icon-user-solid"></i>
          上级
        </template>
        {{ detail.parent }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right" width="60">
        <template #label> 保证金 </template>
        <span class="blue pointer" @click="showBalanceDetail(2)"
          >{{ detail.deposit }} <i class="el-icon-zoom-in"></i
        ></span>
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 支付宝 </template>
        {{ detail.alipay_name }} - {{ detail.alipay }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 余额 </template>
        <span class="pointer blue" @click="showBalanceDetail(0)">{{
          detail.balance
        }}</span>
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 银行卡 </template>
        {{ detail.bank_name }} - {{ detail.bank }} - {{ detail.bank_id }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 录取/报名 </template>
        <span class="blue pointer" @click="openApply(detail)"
          >{{ detail.job_success_times }}/{{ detail.job_apply_times }}
          <i class="el-icon-zoom-in"></i
        ></span>
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 已还/账单 </template>
        <span class="blue pointer" @click="openBill(detail)"
          >{{ detail.repayAmount }}/{{ detail.billAmount }}
          <i class="el-icon-zoom-in"></i
        ></span>
        <span class="warning pointer repay-btn" @click="openRepayRecord(detail)"
          >查看还款记录</span
        >
      </el-descriptions-item>
      <el-descriptions-item label-align="right" width="60">
        <template #label> 总工资 </template>
        <span class="blue pointer" @click="openSalary(detail)"
          >{{ detail.job_salary }} <i class="el-icon-zoom-in"></i
        ></span>
      </el-descriptions-item>

      <el-descriptions-item label-align="right" width="60">
        <template #label> 积分 </template>
        <span class="blue pointer" @click="showCreditList(detail)"
          >{{ detail.credit }}
        </span>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 资产详情 -->
    <assetc v-model="showAssetc" :type="currentType" :user-id="detail.id" />
    <!-- 备注详情 -->
    <notes v-model="showNotes" :data="detail" />
    <!-- 黑名单详情 -->
    <blacklist v-model="showBlackList" :data="detail" />
    <!-- 报名详情 -->
    <job-list v-model="showApply" :data="detail" />
    <!-- 编辑 -->
    <edit v-model="showEdit" :data="detail" />
    <!-- 工资详情 -->
    <salary v-model="showSalary" :student-id="detail.id" />
    <!-- 账单详情 -->
    <bill v-model="showBill" :student-id="detail.id" />
    <!-- 还款记录 -->
    <repay v-model="showRepayRecord" :user-id="detail.id" />
    <!-- 标签 -->
    <tags v-model="showTags" :data="detail" />
    <!-- 签约的零工平台 -->
    <SalaryAgency v-model="showAgency" :data="detail" />
  </ele-modal>
</template>

<script setup>
  import { ref, watch } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { getStudentById } from '@/api/student';
  import Assetc from './assetc-detail.vue';
  import JobList from './job-list.vue';
  import Edit from './edit.vue';
  import Salary from './salary.vue';
  import Bill from './bill.vue';
  import Repay from './repay.vue';
  import Tags from './tags.vue';
  import Notes from '@/views/student/notes/index.vue';
  import Blacklist from '@/views/student/blacklist/index.vue';
  import SalaryAgency from './salary-agency.vue';

  import {
    ZoomIn,
    EditPen,
    CollectionTag,
    Discount
  } from '@element-plus/icons-vue';

  const emit = defineEmits(['done', 'update:modelValue']);
  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    studentId: Number
  });

  /** 详情 */
  const detail = ref([]);

  /** 当前编辑的资产类型 */
  const currentType = ref(null);

  /** 是否显示编辑弹窗 */
  const showAssetc = ref(false);

  /** 是否显示编辑弹窗 */
  const showNotes = ref(false);

  /** 是否显示编辑弹窗 */
  const showBlackList = ref(false);

  /** 是否显示编辑弹窗 */
  const showApply = ref(false);

  /** 打开余额明细 */
  const showBalanceDetail = (type) => {
    currentType.value = type ?? 0;
    showAssetc.value = true;
  };

  /** 打开备注列表 */
  const openNotes = () => {
    showNotes.value = true;
  };

  /** 打开工作记录 */
  const openApply = () => {
    showApply.value = true;
  };

  /** 打开黑名单 */
  const openBlackList = () => {
    showBlackList.value = true;
  };

  /** 编辑标签 */
  const showTags = ref(false);
  const openTags = () => {
    showTags.value = true;
  };

  /** 编辑 */
  const showEdit = ref(false);
  const openEdit = () => {
    showEdit.value = true;
  };

  /** 工资详情 */
  const showSalary = ref(false);
  const openSalary = () => {
    showSalary.value = true;
  };

  /** 账单详情 */
  const showBill = ref(false);
  const openBill = () => {
    showBill.value = true;
  };

  /** 还款记录 */
  const showRepayRecord = ref(false);
  const openRepayRecord = () => {
    showRepayRecord.value = true;
  };

  /** 编辑所属零工平台 */
  const showAgency = ref(false);
  const openAgency = () => {
    showAgency.value = true;
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };
  /** 获取当前学生的信息 */
  const getStudent = () => {
    console.log('读取学生信息', props.studentId);
    getStudentById({ id: props.studentId })
      .then((res) => {
        detail.value = res;
      })
      .catch((e) => {
        EleMessage.error(e.message);
      });
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        if (props.studentId) {
          getStudent();
        }
      } else {
        console.log('什么也没发生');
      }
    }
  );
</script>

<style lang="scss" scoped>
  .detail-table :deep(.el-descriptions__label) {
    width: 108px;
    text-align: right;
    font-weight: normal;
  }
</style>
